<template>
    <h2>理财项目列表</h2>
    理财项目名称:<input type="text" v-model="I_Name">
    理财收益:<input type="text" v-model="I_Mon_1">
    -<input type="text" v-model="I_Mon_2">
    <input value="查询" @click="Show" type="button">


    <table>
        <thead>
            <tr>
                <td>项目名称</td>
                <td>理财收益</td>
                <td>已购买额度</td>
                <td>剩余额度</td>
                <td>人数</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in data" :key="item.I_Id">
                <td>{{ item.I_Name }}</td>
                <td>{{ item.I_Mon }}</td>
                <td>{{ item.I_Back }}</td>
                <td>{{ item.I_Receive }}</td>
                <td>{{ item.I_Num }}</td>
                <td><input value="我要购买" @click="Shop(item.I_Id)" type="button"></td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

const data = ref([{
    I_Name: '',
    I_Mon: '',
    I_Back: '',
    I_Receive: '',
    I_Num: '',
    I_Id: ''
}])
onMounted(() => {
    Show()
})

const I_Name = ref('');
const I_Mon_1 = ref(0);
const I_Mon_2 = ref(0);

const Show = () => {
    axios.get('http://localhost:25936/api/Demo/Show?I_Name=' + I_Name.value + '&I_Mon_1=' + I_Mon_1.value + '&I_Mon_2=' + I_Mon_2.value)
        .then(res => {
            data.value = res.data;


        })
        .catch(error => {
            console.log(error)
        })
}
const router = useRouter();
const Shop = () => {
    router.push({
        name: 'Insert',
        params: {
            I_Id: I_Id
        }
    })
}
</script>